// 存放上树之后的dom的数组
let instance = [];
// 每个上树之后的dom元素的 高度 之和
let upPageDomHeightSum = 0;

// 触发提示的入口方法
export function FontMessage(options) {
  upPageDomHeightSum = 0;
  // 获取body根元素
  let body = document.body;
  // 创建一个信息dom
  let dom = document.createElement("div");
  dom.style.position = "relative";
  dom.setAttribute("class", "tips-plus");

  // 判断颜色
  const colorJudge = (options) => {
    const typeArr = [
      {
        type: "info",
        borderColor: "#ebeef5",
        backgroundColor: "#edf2fc",
        color: "#909399",
        icon: "i",
      },
      {
        type: "success",
        borderColor: "#e1f3d8",
        backgroundColor: "#f0f9eb",
        color: "#67c23a",
        icon: "√",
      },
      {
        type: "warning",
        borderColor: "#faecd8",
        backgroundColor: "#fdf6ec",
        color: "#e6a23c",
        icon: "!",
      },
      {
        type: "error",
        borderColor: "#fde2e2",
        backgroundColor: "#fef0f0",
        color: "#f56c6c",
        icon: "×",
      },
    ];
    typeArr.find((item) => item.type == (options.type ? options.type : "info"));
    return typeArr.find(
      (item) => item.type == (options.type ? options.type : "info")
    );
  };
  // 添加图标和 message信息
  dom.innerHTML =
    `<b style="position:absolute;left: 22px;
    top: 50%;transform: translateY(-50%);color:#fff;width:16px;font-size: 12px;
    line-height: 16px;
    text-align: center;display: inline-block;height:17px;border-radius:50%;background:${
      colorJudge(options).color
    }">${colorJudge(options).icon}</b>` +
    (options.message ? options.message : "我是提示组件哦");

  //设置样式集合
  dom.style.cssText = `
    min-width: 300px;
    max-width: 600px;
    display: inline-block;
    background: ${colorJudge(options).backgroundColor};
    position: fixed;
    padding: 15px 30px 15px 60px;
    left: 50%;
    border-radius: 4px;
    opacity:0.3;
    border: 1px solid ${colorJudge(options).borderColor};
    font-size: 14px;
    transition: all .2s linear;
    transform: translateX(-50%);
    color: ${colorJudge(options).color};
    z-index: 9999999999999999;
  `;

  // 设置上树之后的dom元素的 高度 之和
  upPageDomHeightSum = instance.reduce((prev, next) => {
    return (prev == 0 ? 0 : prev) + next.offsetHeight;
  }, 0);
  instance.push(dom);
  // 上树
  body.appendChild(dom);
  // 设置每次添加进来的dom的top值
  dom.style.top =
    upPageDomHeightSum - dom.offsetHeight + instance.length * 16 + "px";

  // 设置两次为了动画(需要插值才会触发)
  dom.style.top = upPageDomHeightSum + instance.length * 16 + "px";
  dom.style.opacity = 1;

  // 每隔指定时间 清除第一个dom   剩余dom的top减去每次减去的dom高度
  setTimeout(
    () => {
      if (instance[0]) {
        instance[0].style.top = 0 + "px";
        instance[0].style.opacity = 0;
      }
      setTimeout(() => {
        // 删除上树的数组的第一个元素
        let r = instance.shift();
        // 将其它dom的top减去删除的dom的高度
        for (let i = 0; i < instance.length; i++) {
          instance[i].style.top =
            parseInt(instance[i].style.top) - r.offsetHeight - 16 + "px";
        }
        // 删除dom元素
        if (document.body.contains(dom)) document.body.removeChild(dom);
      }, 201);
    },
    options.duration ? options.duration : 2000
  );
}
